<template>
  <div>
    <ych-modal
      :visible="visible"
      :bodyStyle="bodyStyle"
      :confirmLoading="confirmLoading"
      :fullscreen="true"
      @cancel="handleCancel"
      :closable="false"
      :footer="null"
      :destroyOnClose="true"
    >
      <a-spin :spinning="confirmLoading">
        <k-form-design ref="design" @save="handleOk" @close="handleCancel" :height="height" :title="title"
                       @showTemplate="showTemplateDrawer" :showTemplateBut="!!model.objectCode" :groupId="groupId"></k-form-design>
      </a-spin>

      <!--<template slot="footer">
        <a-button v-show="model.objectCode" key="showTemplate" @click="showTemplateDrawer">使用模板</a-button>
        <a-button key="back" @click="handleCancel">关闭</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>-->
    </ych-modal>

    <template-drawer ref="templateDrawer" @selectOk="selectTemplateOk" appType="pc"></template-drawer>
  </div>
</template>

<script>

  import {
    KFormDesign
  } from './designer/packages/index'
  import { putAction, postAction, getAction } from '@/api/manage'
  import TemplateDrawer from './formDesigner/TemplateDrawer'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'FormDesignerDialog',
    components: {
      KFormDesign,
      TemplateDrawer,
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        title: this.$t('m.eform.appform.other.pc_form_design'),
        model: {},
        visible: false,
        bodyStyle: {
          padding: 0,
          margin: 0
        },
        height: document.body.clientHeight + 'px',
        confirmLoading: false,
        url: {
          editDesignData: YchConstant.PREFIX_EFORM + '/manage/actAppForm/editDesignData',
          createFormByTemplate: YchConstant.PREFIX_EFORM + '/engine/formEngine/createFormByTemplate',
          getBoTreeByKey: YchConstant.PREFIX_EFORM + '/manage/actAppObject/getBoTreeByKey',
        }
      }
    },
    methods: {
      handleOk () {
        const data = this.$refs.design.data
        this.confirmLoading = true
        putAction(this.url.editDesignData + '?id=' + this.model.id, data).then((res) => {
          if (res.success) {
            this.messageUtil.success(this.$t('m.eform.formDesign.label.bao-cun-cheng-gong'))
            this.$emit('ok')
            this.visible = false
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      handleCancel () {
        this.visible = false
      },
      showTemplateDrawer () {
        this.$refs.templateDrawer.visible = true
      },
      selectTemplateOk (templateKey) {
        this.confirmLoading = true
        postAction(this.url.createFormByTemplate + '?boKey=' + this.model.objectCode + '&formType=pc&templateKey=' + templateKey, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.$refs.design.handleSetData(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      createBoTreeData (boKey) {
        this.confirmLoading = true
        getAction(this.url.getBoTreeByKey, {
          boKey: boKey
        }).then((res) => {
          if (res.success) {
            let boTree = res.result.boTree
            let colTree = res.result.colTree
            let tableTree = res.result.tableTree
            this.$refs.design.tableName = tableTree[0].value
            this.$refs.design.tableTree = tableTree
            this.$refs.design.colTree = colTree
            this.$refs.design.boTreeData = boTree
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      }
    },
    watch: {
      visible (val) {
        if (val) {
          this.$nextTick(() => {
            //页面元素
            let data = this.model.formModel
            this.title = this.model.formName || this.$t('m.eform.appform.other.pc_form_design')
            if (data) {
              this.$refs.design.handleSetData(JSON.parse(data))
            }
            const boKey = this.model.objectCode
            if (boKey) {
              this.createBoTreeData(boKey)
            }
          })
        } else {
          this.$refs.design.init()
        }
      }
    },
  }
</script>
